<template>
  <div>
    <ElLine :title="'落实情况'" style="margin-bottom: 10px"/>
    <el-table :data="data" border style="width: 100%">
      <el-table-column align="center" type="index" width="50"/>
      <el-table-column align="center" prop="workPrtKeyNode" label="关键节点" width="180"/>
      <el-table-column align="center" :formatter="formatDate" prop="workPrtPlanComltTime" label="计划完成时间" width="180"/>
      <el-table-column align="center" prop="workPrtIsComlt" label="是否完成">
        <template v-slot="{ row }">
        <span :class="{ '#d': row.workPrtIsComlt === 1, '#c': row.workPrtIsComlt === 0 }">
          {{ row.workPrtIsComlt === 1 ? '是' : '否' }}
        </span>
        </template>
      </el-table-column>
      <el-table-column align="center" :formatter="formatDate" prop="workPrtRealComltTime" label="实际完成时间"/>
      <el-table-column align="center" prop="workPrtDesc" label="情况说明"/>
    </el-table>
  </div>
</template>

<script>
import {ref, onMounted} from 'vue';
import {getPracticables} from '@/api/matter/matter.js';

export default {
  name: "implementationStatus",
  props: {
    rowData: {
      type: Object,
      default: null
    }
  },
  setup(props) {
    const data = ref([]);
    const fetchData = () => {
      getPracticables({matterId: props.rowData.matterId}).then(res => {
        data.value = res.data
      })
    };

    onMounted(fetchData);
    const formatDate = (row, column, cellValue) => {
      if (!cellValue) return '';
      const date = new Date(cellValue);
      return new Intl.DateTimeFormat('zh-CN', { year: 'numeric', month: 'numeric', day: 'numeric' }).format(date);
    };

    return {
      data,
      formatDate
    };
  }
};
</script>

<style scoped>
</style>
